<template>
	<view class="pictrue">
		<view class="title">
			<view v-for="(item, index) in cate" :key="index" :class="activeTap == index ? 'block active' : 'block'" @tap="clickTab(index)">{{ item.name }}</view>
		</view>
		<view class="main">
			<block :duration="1000" v-for="(item, index) in cate" :key="index">
				<swiper class="swiper" v-if="index == activeTap">
					<swiper-item v-for="(item_2, key) in item.list" :key="key">
						<view class="swiper-item">
							<video v-if="item_2.type == 1" :poster="item_2.thumb" :src="item_2.resource_url" controls></video>
							<image v-if="item_2.type!=1" :src="item_2.thumb" mode="widthFix" style="width: 100%;"></image>
						</view>
					</swiper-item>
				</swiper>
			</block>
		</view>
		<view class="foot"><text>以上图片以及视频归亿家所有，未经允许严谨使用</text></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:null,
			type:null,
			activeTap: 0,
			cate: []
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.type = option.type;
		this.getData();
	},
	methods: {
		clickTab(tab) {
			this.activeTap = tab;
		},
		getData() {
			this.$request
				.post('/landed/getResource', {
					data: {
						type: this.type,
						id: this.id
					}
				})
				.then(res => {
					console.log(res);
					this.cate = res.data.data.list;
				});
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
}
.pictrue {
	width: 100%;
	height: 100%;
	position: relative;
	padding-top: 100upx;
	background-color: #000;
	box-sizing: border-box;
}
.title {
	width: 100%;
	height: 100upx;
	position: absolute;
	background-color: #191919;
	top: 0;
	left: 0;
	padding: 0 20upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $uni-font-size-lg;
	color: #888888;

	.block {
		box-sizing: border-box;
		height: 100%;
		line-height: 100upx;
	}
	.block.active {
		color: #fff;
	}
}
.main {
	width: 100%;
	height: 100%;
	.swiper {
		width: 100%;
		height: 100%;
		.swiper-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 100%;
			}
		}
	}
}
.foot {
	width: 100%;
	height: 200upx;
	position: absolute;
	background-color: #191919;
	bottom: 0;
	left: 0;
	font-size: $uni-font-size-base;
	color: #888888;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
